<template>
  <div>
    <el-dialog title="题目预览" :visible="isShowPriview" @close="closeFn" @open="openDialog">
      <el-row>
        <el-col style="margin-bottom:10px" :span="6">【题型】：{{handleQuestionType(rowItem.questionType)}}</el-col>
        <el-col style="margin-bottom:10px" :span="6">【编号】：{{rowItem.id}}</el-col>
        <el-col style="margin-bottom:10px" :span="6">【难度】：{{handleDifficulty(rowItem.difficulty)}}</el-col>
        <el-col style="margin-bottom:10px" :span="6">【标签】：{{rowItem.tags}}</el-col>
        <el-col style="margin-bottom:10px" :span="6">【学科】：{{rowItem.subject}}</el-col>
        <el-col style="margin-bottom:10px" :span="6">【目录】：{{rowItem.catalog}}</el-col>
        <el-col style="margin-bottom:10px" :span="6">【方向】：{{rowItem.direction}}</el-col>
      </el-row>
      <el-divider></el-divider>
      【题干】：
      <div v-html="rowItem.question"></div>
      <p v-if="+rowItem.questionType===1">单选题 选项：（以下选中的选项为正确答案）</p>
      <p v-if="+rowItem.questionType===2">多选题 选项：（以下选中的选项为正确答案）</p>
      <div v-if="+rowItem.questionType===1">
        <p v-for="item in options" :key="item.id"><el-radio :value="1" :label="item.isRight">{{item.title}}</el-radio></p>
      </div>
      <div v-if="+rowItem.questionType===2">
        <el-checkbox-group :value="[1]">
          <p v-for="item in options" :key="item.id"><el-checkbox :label="item.isRight" >{{item.title}}</el-checkbox></p>
        </el-checkbox-group>
      </div>
      <el-divider></el-divider>
      <p>【参考答案】： <el-button @click="videoShow = !videoShow" type="danger" size="small">视频答案预览</el-button></p>
      <div v-if="videoShow">
        <video style="width:400px;height:300px" autoplay controls :src="rowItem.videoURL"></video>
      </div>
      <el-divider></el-divider>
      <div>【答案解析】：<div v-html="rowItem.answer"></div> </div>
      <el-divider></el-divider>
      <p>【题目备注】：{{rowItem.remarks}}</p>
      <template #footer>
        <el-button @click="closeFn" type="primary">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty, chkType } from '@/api/hmmm/constants.js'
import { detail } from '@/api/hmmm/questions.js'
export default {
  props: {
    isShowPriview: {
      type: Boolean,
      required: true
    },
    rowItem: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      videoShow: false,
      options: []
    }
  },
  methods: {
    closeFn () {
      this.$emit('update:isShowPriview', false)
      this.videoShow = false
      this.options = []
    },
    handleQuestionType (val) {
      const obj = questionType.find(item => item.value === +val)
      return obj ? obj.label : ''
    },
    handleDifficulty (val) {
      const obj = difficulty.find(item => item.value === +val)
      return obj ? obj.label : ''
    },
    handleChkType (val) {
      const obj = chkType.find(item => item.value === +val)
      return obj ? obj.label : ''
    },
    handlePublishType (cval, pval) {
      if (+cval !== 1) return '待发布'
      if (+pval) return '已发布'
      if (!+pval) return '已下架'
    },
    // 打开对话层的函数
    async openDialog () {
      const res = await detail(this.rowItem)
      this.options = res.data.options
    }
  }
}
</script>

<style>
.el-dialog__footer{
  display: flex;
  justify-content: flex-end;
}
</style>
